<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>重点人群/巡防提醒</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="6">
        任务名称：
        <a-input placeholder="请输入" v-model="queryForm.taskName" />
      </a-col>
      <a-col :span="6">
        巡防人员组织类型：
        <a-select v-model="queryForm.massDefenceClassId" placeholder="请选择">
          <a-select-option
            v-for="item in typeList"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        巡防人员姓名：
        <a-input
          placeholder="请输入"
          v-model="queryForm.massDefenceHumanName"
        />
      </a-col>
      <a-col :span="6">
        巡防巡防提醒状态：
        <a-select v-model="queryForm.warnStatus" placeholder="请选择">
          <a-select-option
            v-for="item in warnStatusList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="10">
        创建时间范围：
        <a-range-picker
          style="width: 330px; margin-left: 10px"
          v-model="dateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{
            hideDisabledOptions: true,
            defaultValue: [
              moment('00:00:00', 'HH:mm:ss'),
              moment('23:59:59', 'HH:mm:ss'),
            ],
          }"
          format="YYYY-MM-DD HH:mm:ss"
          @change="onChange"
        />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="getList"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="btn_box">
        <div>巡防提醒</div>
        <a-button type="primary" @click="addFn" v-hasPermi="['dict:add']"
          >添加</a-button
        >
      </div>
      <a-spin :spinning="loading">
        <a-table
          :scroll="{ x: 500 }"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
        >
          <span slot="warnStatus" slot-scope="text, record">
            <a-switch
              :checked="record.warnStatus === 0"
              @change="(checked) => onStatusChange(checked, record)"
            />
          </span>
          <span slot="action" slot-scope="text, record">
            <a
              @click="editFn(text, 'view')"
              v-hasPermi="['zhonghe:zdrqlxgl:edit']"
              >查看</a
            >
            <a-divider type="vertical" />
            <a
              @click="editFn(text, 'edit')"
              v-hasPermi="['zhonghe:zdrqxx:edit']"
              >修改</a
            >
            <a-divider type="vertical" />
            <a
              @click="delFn(text, record)"
              v-hasPermi="['dict:del']"
              class="red"
              >删除</a
            >
          </span>
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>
    <a-modal
      title="巡防提醒配置"
      :visible="dialogVisible"
      width="38%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="dialogVisible = false"
      @ok="putDict"
    >
      <a-form :form="form">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="任务名称"
        >
          <a-input
            style="width: 100%"
            :disabled="ModalType == 'view'"
            v-decorator="[
              'taskName',
              { rules: [{ required: true, message: '请输入任务名称' }] },
            ]"
            placeholder="请输入任务名称"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="巡防人员组织类型"
        >
          <a-select
            style="width: 100%"
            :disabled="ModalType == 'view'"
            v-decorator="[
              'massDefenceClassId',
              {
                rules: [{ required: true, message: '请选择巡防人员组织类型' }],
              },
            ]"
            placeholder="请选择巡防人员组织类型"
            allowClear
          >
            <a-select-option
              v-for="(item, index) in typeList"
              :key="index"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="巡防人员姓名"
        >
          <a-input
            style="width: 100%"
            :disabled="ModalType == 'view'"
            v-decorator="[
              'massDefenceHumanName',
              { rules: [{ required: true, message: '请输入巡防人员姓名' }] },
            ]"
            placeholder="请输入巡防人员姓名"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="巡防周期"
        >
          <a-radio-group
            style="width: 100%"
            :disabled="ModalType == 'view'"
            v-decorator="['massType']"
            @change="change2"
          >
            <a-radio :value="0"> 单次 </a-radio>
            <a-radio :value="1"> 多次 </a-radio>
            <a-radio :value="3"> 按周期 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="巡防次数"
        >
          <a-radio-group
            style="width: 100%"
            :disabled="ModalType == 'view'"
            v-decorator="['massCount']"
            v-if="massType == 0 || form.massType == 0"
            @change="change2"
          >
            <a-radio :value="0"> 单次 </a-radio>
          </a-radio-group>
          <a-input
            style="width: 100%"
            :disabled="ModalType == 'view'"
            v-if="massType == 1 || form.massType == 1"
            v-decorator="[
              'massCount',
              { rules: [{ required: true, message: '请输入巡防次数' }] },
            ]"
            placeholder="请输入巡防次数"
          />
          <a-select
            style="width: 100%"
            :disabled="ModalType == 'view'"
            v-if="massType == 3 || form.massType == 3"
            v-decorator="[
              'massCount',
              { rules: [{ required: true, message: '请选择巡防次数' }] },
            ]"
            placeholder="请选择巡防次数"
            allowClear
          >
            <a-select-option
              v-for="(item, index) in massCountList"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="巡防下发提醒"
        >
          <a-radio-group
            style="width: 100%"
            :disabled="ModalType == 'view'"
            v-decorator="['warnStatus']"
            @change="change"
          >
            <a-radio :value="0"> 是 </a-radio>
            <a-radio :value="1"> 否 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-if="isShow"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="巡防下发提醒"
        >
          巡防下发后&nbsp;
          <a-input-number
            :disabled="ModalType == 'view'"
            v-decorator="[
              'warnTime',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />&nbsp;小时
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import moment from "moment";
import dayjs from "dayjs";
export default {
  data() {
    return {
      ModalType: "",
      questionSourceList: [],
      dateRange: [],
      loading: true,
      dialogVisible: false,
      queryForm: { current: 20, offset: 1 },
      total: 0,
      form: this.$form.createForm(this, { name: "coordinated" }),
      id: null,
      tableData: [],
      columns: [
        // { title: '序号' },
        {
          title: "巡防ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "任务名称",
          dataIndex: "taskName",
          key: "taskName",
        },
        {
          title: "巡防人员组织类型",
          dataIndex: "massDefenceClassName",
          key: "massDefenceClassName",
        },
        {
          title: "巡防对象姓名",
          dataIndex: "massDefenceHumanName",
          key: "massDefenceHumanName",
        },
        {
          title: "巡防周期",
          dataIndex: "massCountName",
          key: "massCountName",
        },
        {
          title: "巡防提醒状态",
          dataIndex: "warnStatus",
          key: "warnStatus",
          scopedSlots: { customRender: "warnStatus" },
        },
        {
          title: "提醒时间",
          dataIndex: "warnTime",
          key: "warnTime",
        },
        {
          title: "最近更新时间",
          dataIndex: "updateTime",
          key: "updateTime",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          scopedSlots: { customRender: "action" },
        },
      ],
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
      typeList: [],
      warnStatusList: [
        {
          value: 0,
          label: "启用",
        },
        {
          value: 1,
          label: "停用",
        },
      ],
      massCountList: [
        {
          value: 0,
          label: "每日",
        },
        {
          value: -1,
          label: "工作日",
        },
        {
          value: -2,
          label: "周末",
        },
        {
          value: 1,
          label: "每周一",
        },
        {
          value: 2,
          label: "每周二",
        },
        {
          value: 3,
          label: "每周三",
        },
        {
          value: 4,
          label: "每周四",
        },
        {
          value: 5,
          label: "每周五",
        },
        {
          value: 6,
          label: "每周六",
        },
        {
          value: 7,
          label: "每周日",
        },
      ],
      isShow: false,
      massType: 1,
      massDefenceClassList: [],
    };
  },
  async mounted() {
    await this.getTypeList();
    await this.getList();
  },
  methods: {
    moment,
    getList() {
      this.loading = true;
      const url = "government-platform-center/defenceTaskWarn";
      const params = this.queryForm;
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.tableData = res.data.data.map((item) => {
              this.typeList.forEach((item2) => {
                if (item.massDefenceClassId == item2.id) {
                  item["massDefenceClassName"] = item2.name;
                }
              });
              if (item.massType == 0) {
                item["massCountName"] = "单次";
              } else if (item.massType == 1) {
                item["massCountName"] = item.massCount + "次";
              } else if (item.massType == 3) {
                this.$nextTick(() => {
                  this.massCountList.forEach((item2) => {
                    if (item.massCount == item2.value) {
                      item["massCountName"] = item2.label;
                    }
                  });
                });
              }
              return item;
            });
            this.total = res.data.total;
            this.loading = false;
          }
        });
    },
    getTypeList() {
      const url =
        "/government-platform-center/massDefenceTeam/queryMassDefenceTypeList";
      this.$axios.get(url).then((res) => {
        if (res.data.code == 0) {
          this.typeList = res.data.data;
        }
      });
    },
    cleanQuery() {
      this.queryForm = { current: 20, offset: 1 };
      this.dateRange = [];
      this.getList();
    },
    //
    change(e) {
      if (e.target.value == 1) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    change2(e) {
      this.massType = e.target.value;
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.current = pageSize;
      this.getList();
    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList();
    },
    delFn(text, record) {
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/defenceTaskWarn/deleteById`;
          const form = { id: text.id };
          that.$axios
            .post(url, form, {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            })
            .then((res) => {
              if (res.data.code == 0) {
                that.getList();
                message.success("操作成功");
              }
            });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    goData(text, record) {
      this.$router.push({
        path: "/dataDict",
        query: { dictType: text.dictType, id: text.id },
      });
    },
    addFn() {
      this.dialogVisible = true;
      this.id = null;
      this.ModalType = "add";
      this.form.resetFields();
    },
    editFn(text, type) {
      this.ModalType = type;
      this.dialogVisible = true;
      const url = `government-platform-center/defenceTaskWarn/${text.id}`;
      const params = this.queryForm;
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.form.setFieldsValue(res.data.data);
            this.massType = res.data.data.massType;
            console.log(this.massType, "this.massType");
            this.id = res.data.data.id;
          }
        });
    },
    putDict() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        if (!this.id) {
          const form = values;
          form.checkTime = dayjs(form.checkTime).format("YYYY-MM-DD");
          console.log(form, "form");
          const url = "government-platform-center/defenceTaskWarn";
          this.$axios
            .post(url, form, {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            })
            .then((res) => {
              if (res.data.code == 0) {
                this.getList();
                this.reSetForm();
                this.dialogVisible = false;
                message.success("操作成功");
              }
            });
        } else {
          const form = { ...values, id: this.id };
          const url = "government-platform-center/defenceTaskWarn/edit";
          this.$axios
            .post(url, form, {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            })
            .then((res) => {
              if (res.data.code == 0) {
                this.getList();
                this.reSetForm();
                this.dialogVisible = false;
                message.success("操作成功");
              }
            });
        }
      });
    },
    reSetForm() {
      // this.form = { dictName: null, dictType: null, remark: null }
    },
    onStatusChange(checked, record) {
      if (!checked) {
        record.warnStatus = 1;
      } else {
        record.warnStatus = 0;
      }
      const form = { ...record };
      const url = "government-platform-center/defenceTaskWarn/edit";
      this.$axios
        .post(url, form, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.getList();
            this.reSetForm();
            this.dialogVisible = false;
            message.success("操作成功");
          }
        });
    },
    onChange(dates, dateStrings) {
      this.queryForm.startTime = dateStrings[0];
      this.queryForm.endTime = dateStrings[1];
    },
  },
};
</script>

<style lang="scss" scoped>
.app {
  width: calc(100% - 240px);
  background: #f5f5f5;
  padding: 40px;
  box-sizing: border-box;
  overflow-y: scroll;
}

.ant-row {
  border-radius: 5px;

  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
</style>
